const path = require('path')
// webpack插件，帮助webpack打包生成时，创建一个index.html文件
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 删除打包成的dist目录
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 静态资源复制
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
  // 开启的模式，生产还是开发
  mode: 'development',
  // 开发工具配置 开发时配置 source-map 作用：代码出错了，可以帮我们定位到src目录中程序
  devtool: 'source-map',
  // 指定入口文件
  // 字符串
  entry: './src/main.js',
  // 出口
  output: {
    // 打包生成的文件路径 绝对地址
    path: path.resolve('dist'),
    // 打包生成后的主入口js文件
    filename: '[name].[hash:8].js'
  },
  resolve: {
    alias: {
      '@': path.resolve('src')
    },
    extensions: ['.js', '.json', '.art']
  },
  // 加载器
  module: {
    // 规则
    rules: [
      // 处理css
      {
        // 正则匹配loader解析文件扩展名
        test: /\.css$/i,
        // loader执行顺序
        // 执行顺序 写在一行：从右向左，写在多行：从下向上执行
        use: [
          "style-loader",
          "css-loader"
        ]
      },
      // 图片处理
      {
        test: /\.(png|jpeg|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              // 图片小于8kb，就会被base64处理
              limit: 1 * 1024,
              name: 'images/[name].[ext]',
              publicPath: '/'
            }
          }
        ]
      },
      // html中图片处理
      {
        test: /\.html$/,
        loader: ['html-loader']
      },
      // js兼容处理
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [
                [
                  '@babel/preset-env',
                  {
                    // 按需加载
                    useBuiltIns: 'usage',
                    // 指定core-js版本
                    corejs: 3,
                    // 兼容性做到哪个版本的浏览器
                    targets: {
                      chrome: '75'
                    }
                  }
                ]
              ]
            }
          }
        ]
      },
      // ts处理
      {
        test: /\.ts$/,
        use: ['ts-loader']
      },
      // 模板引擎解释
      {
        test: /\.art$/,
        use: ["art-template-loader"]
      }
    ]
  },
  // 插件
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      // 模板
      template: path.resolve('public/index.html')
    }),
    // 复制静态资源 -- 直接复制不做任何处理
    new CopyPlugin({
      patterns: [
        {
          // 来源
          from: path.resolve('public/favicon.ico'),
          // 目标
          to: path.resolve('dist/favicon.ico')
        }
      ]
    })

  ],
  devServer: {
    port: 8080,
    // 显示编辑打包进度
    progress: true,
    // 安静模式,不显打包信息
    quiet: true,
    // 代理
     proxy: {
       '/api': {
         target: 'http://localhost:3000',
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''
         }
       }
     }
  }
}